Basic Checkboxes
<MudCheckBox @bind-Value="Basic_CheckBox1"></MudCheckBox> <MudCheckBox @bind-Value="Basic_CheckBox2" Color="Color.Primary"></MudCheckBox> <MudCheckBox @bind-Value="Basic_CheckBox3" Color="Color.Secondary"></MudCheckBox> <MudCheckBox @bind-Value="Basic_CheckBox4" Disabled="true"></MudCheckBox>
@code { public bool Basic_CheckBox1 { get; set; } = true; public bool Basic_CheckBox2 { get; set; } = false; public bool Basic_CheckBox3 { get; set; } = false; public bool Basic_CheckBox4 { get; set; } = true; }
Color
<MudCheckBox @bind-Value="Basic_CheckBox1" UncheckedColor="Color.Error"></MudCheckBox> <MudCheckBox @bind-Value="Basic_CheckBox2" Color="Color.Primary" UncheckedColor="Color.Default"></MudCheckBox> <MudCheckBox @bind-Value="Basic_CheckBox3" Color="Color.Secondary" UncheckedColor="Color.Default"></MudCheckBox> <MudCheckBox @bind-Value="Basic_CheckBox4" Disabled="true" UncheckedColor="Color.Success"></MudCheckBox>
@code { public bool Basic_CheckBox1 { get; set; } = true; public bool Basic_CheckBox2 { get; set; } = false; public bool Basic_CheckBox3 { get; set; } = false; public bool Basic_CheckBox4 { get; set; } = true; }
Labels
Text can be added using the Label property and its
position can be specified using the LabelPosition property
<MudCheckBox @bind-Value="Label_CheckBox1" Label="Default"></MudCheckBox> <MudCheckBox @bind-Value="Label_CheckBox2" Label="Primary" Color="Color.Primary"></MudCheckBox> <MudCheckBox @bind-Value="Label_CheckBox3" Label="Secondary" LabelPosition="LabelPosition.Start" Color="Color.Secondary"></MudCheckBox> <MudCheckBox @bind-Value="Label_CheckBox1" Disabled="true" Label="Disabled" LabelPosition="LabelPosition.Start"></MudCheckBox>
@code { public bool Label_CheckBox1 { get; set; } = true; public bool Label_CheckBox2 { get; set; } = false; public bool Label_CheckBox3 { get; set; } = false; }
Icons
<MudCheckBox @bind-Value="CheckBox1" Color="Color.Secondary" CheckedIcon="@Icons.Material.Filled.Favorite" UncheckedIcon="@Icons.Material.Filled.FavoriteBorder"></MudCheckBox> <MudCheckBox @bind-Value="CheckBox2" Color="Color.Tertiary" CheckedIcon="@Icons.Material.Filled.Bookmark" UncheckedIcon="@Icons.Material.Filled.BookmarkBorder"></MudCheckBox> <MudCheckBox @bind-Value="CheckBox3" Color="Color.Warning" CheckedIcon="@Icons.Material.Filled.Star" UncheckedIcon="@Icons.Material.Filled.StarOutline"></MudCheckBox>
@code { public bool CheckBox1 { get; set; } = true; public bool CheckBox2 { get; set; } = false; public bool CheckBox3 { get; set; } = false; }